<template>
  <div class="special-deal-page">
    <div class="page-title-container flex" title="特殊处理">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container">
      <a-tabs v-model="activeKey" @change="tabsChange($event)">
        <a-tab-pane
          :tab="item.value"
          v-for="item in tabs"
          :key="item.key"
        ></a-tab-pane>
      </a-tabs>
      <div class="router-view-container">
        <router-view
          class="animate__faster animate__animated animate__fadeIn"
        ></router-view>
      </div>
    </div>
  </div>
</template>

<script>
//【特殊处理】页面
import { getSpecialTabs } from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      activeKey: "",
      tabs: [],
    };
  },

  mounted() {
    this.getSpecialTabs();
  },
  methods: {
    //查询tabs
    getSpecialTabs() {
      let { equTypeValue = "" } = this.$route?.query || {};
      return new Promise((resolve, reject) => {
        getSpecialTabs({
          dicValue: equTypeValue,
        })
          .then((res) => {
            let { data } = res;
            try {
              this.tabs = JSON.parse(data?.result || "[]");
            } catch (error) {
              this.tabs = [];
            }
            resolve();
          })
          .catch((_) => {
            this.tabs = [];
            reject();
          })
          .finally((_) => {
            if (this.tabs.length > 0) {
              this.activeKey = this.tabs[0]?.key || "";
              this.$router.push({
                path: this.getPath(this.activeKey),
              });
            }
          });
      });
    },

    //监听tab切换
    tabsChange(ev) {
      let path = this.getPath(ev);
      this.$router.push({
        path: path,
      });
    },

    //获取页面路由
    getPath(key = "") {
      let path = "";
      let {
        id = "",
        equTypeValue = "",
        tenantCode = "",
        systemCode = "",
        equNum = "",
        equName = "",
        secCode = "",
      } = this.$route?.query || {};
      switch (key) {
        //规则配置
        case "GZPZ":
          path = "/nebula/user-app/equipmentManage/ruleConfig";
          break;

        //字段配置
        case "ZDPZ":
          path = "/nebula/user-app/equipmentManage/fieldConfig";
          break;

        //阈值配置
        case "YZPZ":
          let equType = Number(equTypeValue);
          //生产
          if (equTypeValue == "1") {
            path =
              "/nebula/user-app/equipmentManage/thresholdConfig/productionWarn";
          }
          //施工
          if (
            equTypeValue == "2" ||
            equTypeValue == "3" ||
            equTypeValue == "4" ||
            equTypeValue == "5"
          ) {
            path =
              "/nebula/user-app/equipmentManage/thresholdConfig/constructionWarn";
          }
          //高支模预警
          if (equType >= 21 && equType <= 24) {
            path =
              "/nebula/user-app/equipmentManage/thresholdConfig/highSupportWarn";
          }
          //环境监测
          if (equType == 15) {
            path =
              "/nebula/user-app/equipmentManage/thresholdConfig/environmentWarn";
          }
          //水泥搅拌桩
          if (equType == 20) {
            path =
              "/nebula/user-app/equipmentManage/thresholdConfig/cementMixin";
          }

          break;

        //通知配置
        case "TZPZ":
          path = "/nebula/user-app/equipmentManage/notificationConfig";
          break;

        //试验室
        case "SYLX":
          path = "/nebula/user-app/equipmentManage/thresholdConfig/test";
          break;
        default:
          break;
      }
      return (
        path +
        "?" +
        `id=${id}&equTypeValue=${equTypeValue}&secCode=${secCode}&tenantCode=${tenantCode}&systemCode=${systemCode}&equNum=${equNum}&equName=${equName}`
      );
    },

    //返回
    back() {
      this.$router.push({
        path: `/nebula/user-app/equipmentManage`,
      });
    },
  },
};
</script>

<style lang="less">
.special-deal-page {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  overflow: hidden;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    flex-shrink: 0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    overflow: hidden;
    background: #fff;
    padding: 10px 0 0 16px;
    .flex();
    flex-direction: column;
    /deep/.ant-tabs {
      flex-shrink: 0;
      padding-right: 16px;
      .ant-tabs-bar {
        margin: 0;
      }
      .ant-tabs-content {
        display: none;
      }
    }
    .router-view-container {
      flex: 1;
      padding-right: 16px;
      .custom-scrollbar();
    }
  }
}
</style>
